// web/src/app/(employee)/company/[id]/_components/company-employee-hr-card.tsx
import React from 'react';
import {Education, Employee, Hr} from "@prisma/client";
import {formatPrice} from "@/lib/format";
import {GiTeacher} from "react-icons/gi";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
import Link from "next/link";

type EmployeeCombine = Employee & {
    hr: Hr,
    education: Education
}

interface Props {
    employee: EmployeeCombine[]
}

const CompanyEmployeeHrCard = ({employee}: Props) => {

    return (
        <Card className={`m-4 mb-12`}>
            <CardHeader>
                <CardTitle>
                    <h2 className={`text-2xl font-semibold`}>热门职位</h2>
                </CardTitle>
            </CardHeader>
            <CardContent>
                <div className={`flex flex-col gap-y-3 items-center`}>
                    {employee.map(m => (
                        <Link className={`hover:scale-[1.03] transition-all duration-200 hover:shadow-md
                        active:scale-100 active:shadow-none w-full 
                        w-[80%]x h-24 bg-sky-200/20 rounded-md flex items-center`}
                              href={`/employee/${m.id}`} key={m.id}>
                            <div className={`w-full flex flex-row items-center`}>
                                <div className={`ml-[8%] flex-1 flex flex-col`}>
                                    <span className={`text-lg font-semibold`}>{m.name}</span>
                                    <div className={`text-slate-600 flex flex-row items-center gap-2`}>
                            <span className={`text-orange-600 font-semibold`}>
                                {formatPrice(m.salary)}
                            </span>
                                        {/*<GiTeacher className={`size-4`}/>*/}
                                        {m.education.name}
                                    </div>
                                </div>
                                <div className={`w-[20%] flex flex-row mr-8 gap-x-2`}>
                                    <Avatar className={`size-14 rounded-full`}>
                                        <AvatarImage className={`rounded-full`} src={m.hr?.image}/>
                                        <AvatarFallback className={`bg-blue-400 text-white rounded-full`}>
                                            {m.hr?.username.charAt(0).toUpperCase()}
                                        </AvatarFallback>
                                    </Avatar>
                                    <div className={`flex flex-col`}>
                            <span className={`text-lg`}>
                                {m.hr.username}
                            </span>
                                        <span>招聘专员</span>
                                    </div>
                                </div>
                            </div>
                        </Link>
                    ))}
                </div>
            </CardContent>
        </Card>
    );
};

export default CompanyEmployeeHrCard;
